<template>
	<view class="test-count">
		<view class="tabbar">
			<scroll-view scroll-x class="scroll-view" :scroll-into-view="viewId">
				<view class="scroll-view-content">
					<view class="test-tab" :id="'id_'+ index" v-for="(item,index) in  questionList" :style="item.style" :key="index" @click="setPages(index)" :class="{active:index === activeIndex}">
						{{index+1}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<swiper class="classify-swipe" @change="changeswiper" :current="activeIndex">
			<swiper-item v-for="(item,index) in  questionList" :key="index" class="swiper-item">
				<test-multiple-choice @setBag="setBag" :lengths="questionList.length" :data="item" :index="index" @netchangePage="netchangePage"></test-multiple-choice>
			</swiper-item>
		</swiper>
		<view class="btnCent">
			<view class="button" type="primary" @click="bacchangePage">上一条</view>
			<view class="button tow" type="primary" @click="submit">提 交</view>
			<view class="button" type="primary" @click="netchangePage">下一条</view>
		</view>
	</view>
</template>

<script>
	import uPase from '@/components/gaoyia-parse/parse.vue'
	import marked from 'marked'
	export default {
		data() {
			return {
				viewId: 'id_0',
				active: null,
				activeIndex: 0,
				questionList:[
					// {
					// 	title:`最后输出什么语句？`,
					// 	center:'在进行金融业务系统的网络设计时，应该优先考虑（） 原则',
					// 	answers:[
					// 		"先进性",
					// 		"开放性",
					// 		"经济性",
					// 		"高可用性",
					// 	],
					// 	rightAnswer:4,
					// 	analysis:`网络 `,
					// 	type:'单选题'
					// },{
					// 	title:``,
					// 	center:'设置文字颜色应使用属性？',
					// 	answers:[
					// 		"font-family",
					// 		"font-color",
					// 		"color",
					// 		"font",
					// 	],
					// 	rightAnswer:3,
					// 	analysis:`没有font-color这种说法`,
					// 	type:'单选题'
					// }
				]
			};
		},
		components: {
			uPase,
		},
		onLoad(res) {
			// console.log(res);
			uni.setNavigationBarTitle({
				title: res.mys + "测试"
			})
			let count = parseInt(res.count)
			// console.log(count);
			let ciy = res.mys
			if(res.mys=="综合"){ciy = "全部"};
			// console.log(ciy,'ciyciyciy');
			this.get_test(res.type,count,ciy)
		},
		// 页面周期与 onLoad 同级
		onBackPress(e) {
			console.log(e);
			if (e.from == 'backbutton') {
				uni.showModal({
					title: '提示',
					content: '是否提前退出复习？',
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url:'../../tabBar/Test/Test'
							})
						} else if (res.cancel) {

							return true; //阻止默认返回行为
						}
					}
				});
				return true; //阻止默认返回行为
			}
		},
		methods: {
			submit(){
				uni.showModal({
					title: '提示',
					content: '是否提交？',
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url:'../../tabBar/Test/Test'
							})
						} else if (res.cancel) {

							return true; //阻止默认返回行为
						}
					}
				});
				
			},
			setBag(e){
				console.log(this.activeIndex);
				if(e){
					this.questionList[this.activeIndex].style =  {background:'rgba(85, 255, 127, 0.8)'}
				}else{
					this.questionList[this.activeIndex].style =  {background:'rgba(255, 0, 0, 0.5)'}
				}
				
				
			},
			setPages(i) {
				this.activeIndex = i
			},
			changeswiper(e) {
				const {
					current
				} = e.detail
				this.activeIndex = current
				if (current - 5 <= 0) {
					this.viewId = 'id_0'
				} else {
					this.viewId = 'id_' + (current - 5)
				}
				console.log(this.viewId);
			},
			netchangePage(){
				(this.activeIndex < this.questionList.length-1) && (this.activeIndex++);
			},
			bacchangePage(){
				(this.activeIndex>0) && (this.activeIndex--);
			},
			
			async get_test(type,size,city){
				uni.showLoading()
				// console.log(city);
				let article = await this.$api.get_test({
						"type":type,
						"city":city,
						"size":size*1
				})
				uni.hideLoading()
				if (!article) {
					uni.showToast({
						title:'请求失败',
						icon:'none'
					})
				}else{
					// console.log(article,"学长相处之下");
					if(article.length == 0){
							
							uni.showToast({
								title:'当前选项无数据',
								icon:'none'
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'../../tabBar/Test/Test'
								})()
							},500)
					}else{
							uni.showToast({
								title:'开始做题哦！',
							})
						
					}
					this.questionList = article
					// console.log(this.questionList);
				}
				
			},
		}
	}
</script>

<style>
</style>
<style scoped lang="scss">
	.test-count {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		.btnCent{
			display: flex;
			.button{
				background-color: $my-bg-color;
				border-radius: 0;
				flex: 1;
				height: 42px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				&.tow{
					border-right: 1px solid #f0f0f0;
					border-left: 1px solid #f0f0f0;
					max-width: 100px;
				}
			}
		}
		.xiangjie{
			background-color: #fff;
			height: 100%;
			width: 100%;
			margin-top: 30px;
			padding: 5px;
			.title{
				font-size: 16px;
				text-align: center;
				font-weight: bold;
			}
		}
		.zuihou-daan{
			margin-top: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 15px;
			background-color: #fff;
			border-radius: 3px;
			.daana{
				font-weight: bold;
				display: flex;
				align-items: center;
				color: #333;
			}
			.danbut{
				font-size: 12px;
				border-radius: 13px;
				background-color: $my-bg-color;
				padding: 5px 10px;
				color: #fff;
			}
		}
		.test-centet {
			margin: 0 10px;

			height: 100%;
			.test-heard {
				display: flex;
				align-items: center;
				margin: 5px 0;

				.heard-index {
					color: $uni-color-primary;
					margin-right: 5px;
				}

				.header-title {
					color: #888;
				}
			}
		}

		.scroll-view {
			overflow: hidden;
			box-sizing: border-box;
		}

		.scroll-view-content {
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			height: 30px;
			margin-right: 5px;

			.test-tab {
				// background-color: #007AFF;
				min-width: 30px;
				color: #666;
				border: 1px solid #ddd;
				border-radius: 5px;
				flex: 1;
				margin-left: 5px;
				text-align: center;

				box-sizing: border-box;
			}

			// flex-direction: row;
			.scroll-view-item {
				flex-shrink: 0;
				padding: 0 10px;
				color: #333;
				font-size: 14px;

				&.active {
					color: $uni-color-warning;
				}
			}
		}

		.classify-swipe {
			height: 100%;

		}

		.swiper-item {
			height: 100%;
		}

		.test-tab-box {
			display: flex;
			flex: 1;
			margin-right: 5px;
			margin-top: 5px;
			justify-content: space-around;
			box-sizing: border-box;

			.test-tab {
				// background-color: #007AFF;
				min-width: 30px;
				color: #666;
				border: 1px solid #ddd;
				border-radius: 5px;
				flex: 1;
				margin-left: 5px;
				text-align: center;

				box-sizing: border-box;
			}
		}

		.active {
			border: 1px solid #00FF00 !important;
			// background-color: #0000FF;
		}

		.activedaan {
			background-color: rgba(0, 0, 0, 0.1);
		}

		.daan-conten {
			display: flex;
			flex-direction: column;
			color: #333;

			.daan-conten_item {
				display: flex;
				align-items: center;
				border-radius: 3px;
				margin-top: 10px;
				padding-left: 5px;

				.cdata-index {
					margin-right: 10px;
					border: 1px #aaa solid;
					border-radius: 50%;
					width: 18px;
					height: 18px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
